<template>
  <ul class="px-6">
    <li v-for="(item, index) in list" :key="index" class="py-8 flex border-b">
      <el-image class="w-16 h-16" :src="item.avatar"></el-image>
      <div class="ml-6 flex flex-col justify-between grow">
        <div class="group flex flex-col justify-between">
          <nuxt-link to="/recommend" class="group-hover:text-blue">{{
            item.title
          }}</nuxt-link>
          <div class="my-4 flex flex-wrap space-x-4">
            <nuxt-link
              to="/recommend"
              v-for="(img, index2) in item.images"
              :key="index2"
            >
              <el-image :src="img" class="w-40 h-32 object-cover"></el-image>
            </nuxt-link>
          </div>
        </div>
        <div class="flex justify-between text-sm text-gray-500">
          <div>
            <span>{{ item.location }}</span>
            <span>{{ item.date }}</span>
          </div>
          <div>
            <i class="el-icon-view"></i>
            <span>{{ item.view_count }}</span>
            <i class="ml-4 el-icon-chat-dot-square"></i>
            <span>{{ item.comment_count }}</span>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

  <script>
const obj = {
  avatar: require("@/assets/images/avatar.jpg"),
  title: "「泰拉酒馆」APP上线啦！",
  images: [
    "https://tlryjg.jiaohusheji.net/wp-content/uploads/2022/09/1664503378-20220930100245.jpg",
    "https://tlryjg.jiaohusheji.net/wp-content/uploads/2022/09/1663224059-20220915144009.jpg",
  ],
  location: "办公室",
  date: "两天前",
  view_count: 1234,
  comment_count: 123,
};
const list = new Array(10).fill(obj);
export default {
  data() {
    return {
      list,
    };
  },
};
</script>